#app {
  &.blueTechnologyTheme {
    .main {
        &-container {
            background: $main-background;
            background-size: 100% 100%;
            background-color: #05325b;
            // height: calc(100vh - 50px);
            .navbar {
                background: $nav-background;
                background-size: cover;
                background-repeat: round;

                svg {
                    fill : #fff;
                }

                i {
                    color : #fff;
                }

                .el-breadcrumb__inner {

                    a {
                        color : #fff;

                        &:hover {
                            color : $primary-color;
                        }
                    }

                }
            }

            .page-home {
                &-header {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    border-bottom : 1px solid $primary-color;

                    .home-title {
                        font-size: 28px;
                        font-weight: bold;
                        color : #fff;
                    }
                }

                &-wrapper {
                    display: flex;
                    align-items: center;
                    margin-top:20px;
                    flex-wrap: wrap;

                    .function-enter {
                        background-color: rgba($color: #fff, $alpha: 0.1);
                        box-shadow: $box-shadow;
                        padding : 12px 22px;
                        font-size: 16px;
                        text-align: center;
                        margin-right: 20px;
                        margin-bottom: 20px;

                        &:last-child{
                            margin-right: 0;
                        }

                        &-img {
                            width: 100px;
                            height: 100px;
                            border-radius: 10%;
                            overflow: hidden;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            background-color: rgba($color: #fff, $alpha: 0.9);

                            ._img {
                                width: 60px;
                                height: 60px;
                            }
                        }

                        &-tip {
                            margin-top: 12px;
                            color : #fff;
                        }
                    }
                }
            }
            
            .tags-view-container{
              background: $tag-view-background;
              background-size: 100% 100%;
              
            }
        }
    }

    .app {
        &-main {
            background: $main-background;
            // height: calc(100vh - 50px);
        }
    }

    .pagination{

        &-container {
            background-color: transparent;
            padding: 10px 16px;
            display: flex;
            justify-content: center;
            color: #fff;

            .el-pagination__total,
            .el-pagination__jump {
                color : #fff;
            }
        }
    }

    .el-pagination{

        .el-pagination__total,
        .el-pagination__jump {
            color : #fff;
        }
    }

    .userPagination {
      .el-pagination {
        .el-pagination__total,
        .el-pagination__jump{
          color: #000 !important;
        }
      }
    }

    .file-manage {
        .el-card {
            background-color: rgba($color: #fff, $alpha: 0.1);
            border:1px dashed rgba(255,255,255,0.5);
            height: 64px;
            margin : 24px;
            cursor: pointer;
            .card-content {
                color : #fff;
                height: 64px;
                line-height: 64px;
                text-align: center;
            }
        }
    }

    .ly-tools {
        $tools-margin : 6px;
        width: 362px;
        left : $tools-margin;
        top : $tools-margin;
        background-color: #fff;
        position: absolute;

        .el-form-item--mini.el-form-item{
            margin-right: 0px;
            margin-bottom:0px;
        }

        .search-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }


        .ly-caret {
            position: absolute;
            right: -18px;
            top: calc(50% - 20px);
            z-index: 1;
            cursor: pointer;
            font-size: 25px;
            height: 60px;
            line-height: 60px;
            width: 20px;
            background-color: #fff;
            border-top-right-radius: 20px;
            border-bottom-right-radius: 20px;

            i {
                color : #999;
                font-size: 20px;
            }
        }

        &.ly-hidden {
            left: -362px;
            animation: lyHidden 1s;
            -moz-animation: lyHidden 1s;
            -webkit-animation: lyHidden 1s;
            -o-animation: lyHidden 1s;
        }

        &.ly-show {
            animation: lyShow 1s;
            -moz-animation: lyShow 1s;
            -webkit-animation: lyShow 1s;
            -o-animation: lyShow 1s;
        }

        @keyframes lyHidden {
            from {
              left: 0;
            }

            to {
              left: -362px;
            }
        }

        @keyframes lyShow {
            from {
              left: -362px;
            }

            to {
              left: $tools-margin;
            }
        }

        .block {
            .el-tabs {
                box-shadow: none;
                border:1px solid #ccc;
                .el-tabs__header {
                  box-shadow: none;
                  border-bottom: 1px solid #dfe4ed;
                }
                .ly-form-inline {
                    display: block;

                    .el-form-item__label {
                        font-size: 14px;
                        font-weight: normal;
                    }
                }

                .ly-form-checkbox {
                    .el-form-item__content {
                        display: flex;
                        justify-content: space-between;

                        .el-checkbox{
                            color : #555
                        }
                    }
                }

                .ly-table-container{
                    margin-top: 10px;

                    .el-table-column--selection .cell {
                        padding : 0 0 0 4px;
                    }

                    .el-table {
                        .cell {
                            padding:4px;
                        }
                    }
                }

                .el-form-item__label {
                  color : #555;
                }

                thead {
                  color : #555;
                }

                .el-table {
                  color : #555;
                }
            }
        }
    }

  }
}